<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #demo{
        background-color: red;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ul id="demo" class="ul" style="background-color: aqua;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ul class="div1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <div class="div1">1</div>
    <div name="div2">2</div>
</body>
</html>

<script>
    // 通过HTML标签获取元素节点
    let ulTag = document.getElementsByTagName('ul');
    // id是唯一的
    let demo = document.getElementById('demo');

    // 通过class名去获取元素节点
    let div1 = document.getElementsByClassName('div1');

    let lis = document.getElementById('demo').getElementsByTagName('li');

    // console.log(ulTag[1]);
    // console.log(demo);

    console.log(document.querySelectorAll('#demo li'));
    // console.log(div1);
    // console.log(lis);
    console.log(document.getElementsByName('div2'));

    console.log(demo.style.backgroundColor);

    // demo.className += ' demo';
    demo.classList.add('demo');
    demo.classList.remove('demo');
    demo.classList.toggle('demo');
</script>